"use client"
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { Button, Descriptions, Image, Tag, Divider, Rate } from 'antd';
import { ShoppingCartOutlined, HeartOutlined } from '@ant-design/icons';

interface ProductDetail {
  id: string;
  name: string;
  price: number;
  description: string;
  images: string[];
  category: string;
  stock: number;
  rating: number;
  specifications: {
    [key: string]: string;
  };
}

const ProductDetail: React.FC = () => {
  const router = useRouter();
  const { id } = router.query;
  const [product, setProduct] = useState<ProductDetail | null>(null);
  const [selectedImage, setSelectedImage] = useState<string>('');

  useEffect(() => {
    if (id) {
      // 这里替换为实际的API调用
      fetchProductDetail(id as string);
    }
  }, [id]);

  const fetchProductDetail = async (productId: string) => {
    try {
      // 这里替换为实际的API调用
      const response = await fetch(`/api/products/${productId}`);
      const data = await response.json();
      setProduct(data);
      setSelectedImage(data.images[0]);
    } catch (error) {
      console.error('获取商品详情失败:', error);
    }
  };

  if (!product) {
    return <div className="min-h-screen flex items-center justify-center">加载中...</div>;
  }

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-xl shadow-lg overflow-hidden">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-8">
            {/* 左侧图片区域 */}
            <div className="space-y-4">
              <div className="aspect-w-1 aspect-h-1 w-full">
                <Image
                  src={selectedImage}
                  alt={product.name}
                  className="object-cover rounded-lg"
                  width="100%"
                />
              </div>
              <div className="grid grid-cols-4 gap-2">
                {product.images.map((img, index) => (
                  <div
                    key={index}
                    className={`cursor-pointer border-2 rounded-md overflow-hidden
                      ${selectedImage === img ? 'border-blue-500' : 'border-transparent'}`}
                    onClick={() => setSelectedImage(img)}
                  >
                    <Image src={img} alt={`${product.name}-${index}`} width="100%" />
                  </div>
                ))}
              </div>
            </div>

            {/* 右侧信息区域 */}
            <div className="space-y-6">
              <div>
                <h1 className="text-3xl font-bold text-gray-900">{product.name}</h1>
                <div className="mt-2 flex items-center">
                  <Rate disabled defaultValue={product.rating} className="text-yellow-400" />
                  <span className="ml-2 text-gray-500">({product.rating} 分)</span>
                </div>
              </div>

              <div className="text-2xl font-bold text-red-600">
                ¥ {product.price.toFixed(2)}
              </div>

              <Divider />

              <Descriptions column={1} className="text-gray-600">
                <Descriptions.Item label="商品类别">
                  <Tag color="blue">{product.category}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="库存状态">
                  <Tag color={product.stock > 0 ? 'green' : 'red'}>
                    {product.stock > 0 ? `库存 ${product.stock}` : '无货'}
                  </Tag>
                </Descriptions.Item>
              </Descriptions>

              <div className="space-y-4">
                <h3 className="text-lg font-medium text-gray-900">商品规格</h3>
                <div className="grid grid-cols-2 gap-4">
                  {Object.entries(product.specifications).map(([key, value]) => (
                    <div key={key} className="text-sm text-gray-600">
                      <span className="font-medium">{key}:</span> {value}
                    </div>
                  ))}
                </div>
              </div>

              <div className="space-y-4">
                <h3 className="text-lg font-medium text-gray-900">商品描述</h3>
                <p className="text-gray-600">{product.description}</p>
              </div>

              <div className="flex space-x-4 pt-6">
                <Button
                  type="primary"
                  size="large"
                  icon={<ShoppingCartOutlined />}
                  className="flex-1 bg-blue-500 hover:bg-blue-600"
                >
                  加入购物车
                </Button>
                <Button
                  size="large"
                  icon={<HeartOutlined />}
                  className="flex-1"
                >
                  收藏商品
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDetail;
